<template>
	<view>
		<u-navbar title="设置" :autoBack="true"></u-navbar>
		<view style="padding:0 20rpx;box-sizing: border-box;position: absolute;top:160rpx;width: 100%;">
			<view class="card_main">
				<view class="line_box">
					<view class="line_left">头像</view>
					<view class="line_right">
						<robby-image-upload :src="icon" :width="width" :height="height"
							:lineheight="lineheight" :borderRadius="borderRadius"></robby-image-upload>
						<image src="" style="width: 7rpx;height:12rpx;" mode="" />
					</view>
				</view>
				<view class="line_box" @click="authShow=true">
					<view class="line_left">账号</view>
					<view class="line_right">
						{{uInfo.usernumber}}
						<image src="" style="width: 7rpx;height:12rpx;" mode="" />
					</view>
				</view>
				<!-- <view class="line_box">
					<view class="line_left">归属地</view>
					<view class="line_right">
						北京市东城区
						<image src="@/static/img/user/go-right.png" style="width: 7rpx;height:12rpx;" mode="" />
					</view>
				</view> -->
			</view>

			<view class="card_main center_pd">
				<view class="line_box">
					<view class="line_left">手机号码</view>
					<view class="line_right">
						<view>{{uInfo.mobile}}</view>
						<image src="" style="width: 7rpx;height:12rpx;" mode="" />
					</view>
				</view>
				<view class="line_box">
					<view class="line_left">账户认证</view>
					<view class="line_right" @tap="goAuth">
						<view v-show="uInfo.status <= 1">未认证</view>
						<view v-show="uInfo.status == 2">认证中</view>
						<view v-show="uInfo.status == 3">已认证</view>
						<image src="@/static/img/user/go-right.png" style="width: 7rpx;height:12rpx;" mode="" />
					</view>
				</view>
				<view class="line_box">
					<view class="line_left">收款方式</view>
					<view class="line_right" @tap="goPay">
						<view>去添加/修改</view>
						<image src="@/static/img/user/go-right.png" style="width: 7rpx;height:12rpx;" mode="" />
					</view>
				</view>
				<view class="line_box">
					<view class="line_left">我的地址</view>
					<view class="line_right" @tap="goAddress">
						<view>添加/修改</view>
						<image src="@/static/img/user/go-right.png" style="width: 7rpx;height:12rpx;" mode="" />
					</view>
				</view>
				<view class="line_box">
					<view class="line_left">修改登录密码</view>
					<view class="line_right" @tap="changCode">
						<view>修改</view>
						<image src="@/static/img/user/go-right.png" style="width: 7rpx;height:12rpx;" mode="" />
					</view>
				</view>
				<view class="line_box">
					<view class="line_left">修改交易密码</view>
					<view class="line_right" @tap="changPwd2">
						<view>修改</view>
						<image src="@/static/img/user/go-right.png" style="width: 7rpx;height:12rpx;" mode="" />
					</view>
				</view>

				<view class="line_box">
					<view class="line_left">服务协议</view>
					<view class="line_right" @tap="goService">
						<view>查看</view>
						<image src="@/static/img/user/go-right.png" style="width: 7rpx;height:12rpx;" mode="" />
					</view>
				</view>
				<view class="line_box">
					<view class="line_left">隐私政策</view>
					<view class="line_right" @tap="goPrivacy">
						<view>查看</view>
						<image src="@/static/img/user/go-right.png" style="width: 7rpx;height:12rpx;" mode="" />
					</view>
				</view>
				<!-- <view class="line_box">
					<view class="line_left">清除缓存</view>
					<view class="line_right">
						<view>31.35K</view>
						<image src="@/static/img/user/go-right.png" style="width: 7rpx;height:12rpx;" mode="" />
					</view>
				</view> -->
				<view class="line_box" style="padding-bottom: 40rpx;">
					<view class="line_left">版本号</view>
					<view class="line_right">
						<view>{{version}}</view>
						<image src="" style="width: 7rpx;height:12rpx;" mode="" />
					</view>
				</view>
			</view>
			<view class="card_main bottom_txt" @tap="logou">
				安全退出
			</view>
		</view>

	</view>
</template>
<script>
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				icon: '',
				width: '60rpx',
				height: '60rpx',
				lineheight: '60rpx',
				borderRadius: '50%',
				
				version: '',
				uInfo: {}
			}
		},
		onLoad() {

			if (!this.hasLogin) {
				this.$api.msg('尚未登录，请先登录');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
				return false;
			}
			this.version = this.$version
			this.getUserInfo()
			
			uni.$on('changeHeadimg', (option) => {
				let data = JSON.parse(option)
			
				this.icon = data.data;
				this.headimg(data.data)
			})
		},
		
		components: {
			robbyImageUpload,
		},
		
		computed: {
			...mapState(['hasLogin']),
		},
		methods: {
			...mapMutations(['logout']),

			async getUserInfo() {
				uni.showLoading({
					title: '加载中...'
				});
				let token = uni.getStorageSync('token');
				if (!token) {
					this.$api.msg('token缺失！');
					uni.hideLoading();
					return;
				}
				let url = '/getUserInfo';
				let res = await this.$myRequest({
					url: url,
					data: {
						token: token
					},
					methods: 'post'
				})
				let info = res.data.data;
				this.uInfo = info
				this.icon = this.uInfo.icon ? this.uInfo.icon : '/static/img/user/touxiang.png';
				uni.hideLoading();
			},
			
			async headimg(headimg) {
				let token = uni.getStorageSync('token');
				let res = await this.$myRequest({
					url: '/headimg',
					data: {
						token: token,
						headimg: headimg
					},
					methods: 'post'
				})
			},

			goAuth() {
				uni.redirectTo({
					url: '/pages/user/user-auth'
				})
			},

			goPay() {
				uni.navigateTo({
					url: '/pages/user/account'
				})
			},

			goAddress() {
				uni.navigateTo({
					url: '/pages/user/address'
				})
			},

			goService() {
				uni.navigateTo({
					url: '/pages/docs/service-contract',
				})
			},

			changCode() {
				uni.navigateTo({
					url: '/pages/user/changeCode'
				})
			},
			changPwd2() {
				uni.navigateTo({
					url: '/pages/user/changePwd2'
				})
			},

			goPrivacy() {
				uni.navigateTo({
					url: '/pages/docs/privacy-policy',
				})
			},

			logou() {
				this.logout()

				uni.setStorageSync('token', '')
				this.$api.msg('退出成功')
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 1000)
			}
		}
	}
</script>

<style>
	/* subpages2/text2/text2.wxss */
	page {
		background: #f2f2f2;
	}

	.card_main {
		padding: 0 20rpx;
		background: #ffffff;
		border-radius: 10rpx;
	}

	.line_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 92rpx;
	}

	.line_left {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
	}

	.line_right {
		display: flex;
		align-items: center;
		color: #9d9d9d;
		font-size: 28rpx;
	}

	.line_right image {
		margin-left: 16rpx;
	}

	.line_box {
		border-bottom: 1px solid #f2f2f2;
	}

	.card_main {
		margin-top: 20rpx;
	}

	.center_pd .line_box {
		height: 84rpx;
	}

	.bottom_txt {
		text-align: center;
		padding: 24rpx;
		color: #9d9d9d;
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}

	.auth_box>>>.u-modal {
		width: 520rpx !important;
		border-radius: 20rpx;
		text-align: center;
	}

	.auth_box>>>.u-modal__title {
		padding: 22rpx 0;
		color: #333;
		/* border-bottom: 1px solid rgb(239, 240, 241); */
	}

	.auth_box>>>.u-modal__content {
		padding: 0rpx 40rpx !important;
		padding-bottom: 30rpx !important;
	}

	.auth_box>>>.u-modal__button-group__wrapper__text {
		font-size: 28rpx !impprtant;
	}

	/* .btn {
		color: white;
		background-color: #29ad97;
		border-radius: 50rpx;
		margin: 100rpx 20rpx;
		font-size: 32upx;
		letter-spacing: 2upx;
	}

	page {
		background-color: #f0efee;
	} */
</style>